Crea un Menú Horizontal Responsive con CSS Flexbox Muy Fácil.

46,582 vistas
7 jul 2020
LexterXPS
10,600 suscriptores
Suscribirse
En este vídeo te voy a mostrar cómo poder hacer un Menú Horizontal Responsive con CSS Flexbox, usando un poco de Vanilla JS. Sucríbete para más vídeos como éste. :) ------------------------------------------------------------------------------------------- ACCESO AL CÓDIGO FUENTE EN MI PATREON: https://www.patreon.com/LexterXPS Sígueme en Facebook: http://facebook.com/XPSTutoriales E - mail: xtremetuts@gmail.com No olvides dejar tu Like y compartir para seguir creciendo. :)
 Mostrar menos
para la gente que no entendió el js, esta es otra opción mucho mas fácil. 1. (en el html) donde tenemos la clase class="menu-items" vamos a agregar un id, id="otroModo" donde tenemos la clase class="btn-menu" vamos a agregar un evento al darle click, onclick="showmenu()" 2.(en el javaScript) haremos una función (la que tenemos en el onclick). function showmenu() { document.getElementById("otroModo").classList.toggle("show"); } solamente es que va a ir al documento y va a buscar el id llamado otroModo y si tiene la clase show se la quita y sino la tiene se la pone.
34
Eres excelente, a parte de usar buenas prácticas explicas muy bien. Muchas gracias
3
excelente tutorial, muy bien explicado.
Hola, acá les dejo mi solución, ya que la del tutorial no me funcionaba. (en el html el src al js lo deje como archivo.js), al const del js lo cambié por var y ualá!, espero le sirva a alguien más, saludos!. Y muchas gracias por el Menú! window.onload = function() { var btn_menu = document.querySelector('.btn_menu') if (btn_menu) { btn_menu.addEventListener('click', () => { var menu_items = document.querySelector('.menu_items') menu_items.classList.toggle('show') }) } }
8
Hola, tengo una duda. Me salió bastante bien pero el botón de menú y el logo no quedaron posicionados igual que en tu video. Quedan más centrados y a medida que achico la pantalla, se van acercando hasta juntarse. Dónde puede estar el error y cómo lo corrijo? Gracias.
1
Gran video amigo!!, Tuve problemas con el JS pero después de checarlo con tu vídeo ví mi error y lo pude solucionar xD Eres un crack!!!
1
Muy buen tutorial muchas gracias por tu ayuda y espero seguir viendo vídeos tuyos saludos
es muy interesante tu video, pero me gustaría aconsejarte que cada vez que haces un cambio guardes y muestres que es lo que haz hecho ya que muchos nos perdemos si no sabemos cuales son los cambios que has hecho
3
Excelente el tutorial. (Un poco de 'zoom' sobre el IDE para ver el código si usar 'pantalla completa' ). Qué sigan los éxitos.
2
Excelente hermano, gracias por el tuto, he salido de un apuro.
buen video amigo podrias hacer uno en el que muestres como usar el mismo menu pero en diferentes archivos html, es decir hacer una sola vez el menu y usarlo en otras archivos html
1
Cumplo mis promesas y el video me gusto y me fue de muchisima ayuda, nuevo sub y toma pedazo de like
Para los que no les funciona el boton en celulares, deben de importar su archivo de js en su html, a lo mejor para muchos esto es obvio, pero para los que estamos empezando es enredozo, se importa de la siguiente forma: Vas a tu html, una linea antes de </body> pones la siguiente etiqueta <script src="rutadetucarpetadejs/nombredetuarchivo.js"></script>
Hola buenas noches podrias poner el link del proyecto muchas gracias saludos cordiales buen video
Muchas gracias simplemente agradecido, lo necesitaba. :)❤❤ Tienes tu like y mi suscripción.
Hola Lexter, excelente video, cómo puedo tener ese código fuente?
1
Excelente vídeo 👌🏻 Y cuál emulador utilizas?
1
Muchas gracias. Aprendí mucho con este videotutorial. Saludos.
Excelente tu video tutorial! felicitaciones. Solo una consulta. siempre pensé que el logo tenia que estar en un header por semántica?
Simple y facil. Gracias brother